<template>
    <div class="withdrawal-audit-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <div class="header-content">
                <div class="header-left">
                    <h2>提现审核</h2>
                </div>
                <div class="header-right">
                    <el-button @click="handleCancel">
                        <el-icon><ArrowLeft /></el-icon>
                        返回
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 审核内容 -->
        <div class="audit-content">
            <!-- 人员信息卡片 -->
            <el-card shadow="never" class="info-card">
                <div class="personnel-info">
                    <h3>人员信息</h3>
                    <div class="info-grid">
                        <div class="info-left">
                            <div class="info-item">
                                <span class="info-label">服务商名称:</span>
                                <span class="info-value">{{ auditData.serviceProviderName }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">真实姓名:</span>
                                <span class="info-value">{{ auditData.realName }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">提现方式:</span>
                                <span class="info-value">{{ auditData.withdrawalMethod }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">银行卡:</span>
                                <span class="info-value">{{ auditData.bankCard }}</span>
                            </div>
                        </div>
                        <div class="info-right">
                            <div class="info-item">
                                <span class="info-label">专家账号:</span>
                                <span class="info-value">{{ auditData.expertAccount }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">申请时间:</span>
                                <span class="info-value">{{ auditData.applicationTime }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">银行名称:</span>
                                <span class="info-value">{{ auditData.bankName }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">申请金额:</span>
                                <span class="info-value">{{ auditData.applicationAmount }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">电话:</span>
                                <span class="info-value">{{ auditData.phone }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>

            <!-- 审核状态卡片 -->
            <el-card shadow="never" class="audit-card">
                <div class="audit-status">
                    <h3>审核状态</h3>
                    <div class="status-options">
                        <el-radio-group v-model="auditForm.status">
                            <el-radio value="pass">通过</el-radio>
                            <el-radio value="fail">不通过</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="reason-input">
                        <el-input
                            v-model="auditForm.reason"
                            type="textarea"
                            :rows="4"
                            placeholder="输入不通过原因。"
                        />
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <el-button @click="handleCancel">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">保存</el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ArrowLeft } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

const id = route.params.id as string;

// 审核数据
const auditData = reactive({
    serviceProviderName: '青年协会',
    realName: '周波',
    withdrawalMethod: '银行卡',
    bankCard: '312119900877874445',
    expertAccount: '17584758574',
    applicationTime: '2025 7/20 16:55:22',
    bankName: '中国银行',
    applicationAmount: '20000.00',
    phone: '17458585785'
});

// 审核表单
const auditForm = reactive({
    status: '',
    reason: ''
});

// 提交审核
const handleSubmit = async () => {
    if (!auditForm.status) {
        ElMessage.error('请选择审核状态');
        return;
    }

    if (auditForm.status === 'fail' && !auditForm.reason.trim()) {
        ElMessage.error('请输入不通过原因');
        return;
    }

    ElMessageBox.confirm(
        `确定要${auditForm.status === 'pass' ? '通过' : '拒绝'}此提现申请吗？`,
        '确认操作',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        ElMessage.success('审核完成');
        router.push('/withdrawal-list');
    }).catch(() => {
        ElMessage.info('已取消操作');
    });
};

// 取消操作
const handleCancel = () => {
    router.push('/withdrawal-list');
};

// 页面初始化
onMounted(() => {
    // 加载提现申请数据
    loadWithdrawalData(id);
});

// 加载提现数据
const loadWithdrawalData = (withdrawalId: string) => {
    // 模拟加载数据
    console.log('加载提现数据，ID:', withdrawalId);
    // 这里可以调用API加载数据
};
</script>

<style scoped>
.withdrawal-audit-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.page-header {
    border-radius: 8px;
    margin-bottom: 20px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left h2 {
    margin: 0;
    color: #333;
    font-size: 24px;
}

.audit-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    border-radius: 8px;
    padding: 30px;
}

.audit-card {
    border-radius: 8px;
    padding: 30px;
}

.personnel-info h3 {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 18px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.info-item {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
}

.info-label {
    font-weight: 500;
    color: #606266;
    min-width: 100px;
    margin-right: 10px;
}

.info-value {
    color: #303133;
    font-weight: 400;
}

.audit-status h3 {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 18px;
}

.status-options {
    margin-bottom: 20px;
}

.reason-input {
    margin-top: 15px;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .withdrawal-audit-container {
        padding: 10px;
    }
    
    .header-content {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .info-card,
    .audit-card {
        padding: 20px;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
}
</style>
